// 用户页 控制器

// 引入用户页
import userView from "@/users.ejs"
// 引入api
import axios from "../api/index.js"
// 获取 axios 中 baseURL
let baseURL = axios.defaults.baseURL;
// console.log(baseURL);

// 封装getdata 函数  发送ajax请求
async function getdata(res, p = 3) {
    let { data } = await axios.get("/user/getdata", {
        params: {
            p
        }
    })
    // console.log(data);
    res.render(userView({ users: data.users, baseURL, totalpage: data.totalpage }));
}

// 封装dom节点绑定事件
function addEvent(res) {
    // 获取需要修改的事件
    let adduserbtn = document.querySelector(".adduer");
    let adduermodelEle = document.querySelector(".adduermodel");
    let maskEle = document.querySelector(".mask")
    let closebtn = document.querySelector(".closebtn");
    let imgdiv = document.querySelector(".imgshow")
    // 注册点击事件
    adduserbtn.onclick = function () {
        adduermodelEle.style.display = "block";
        maskEle.style.display = "block";
    }
    closebtn.onclick = function () {
        adduermodelEle.style.display = "none";
        maskEle.style.display = "none";
    }

    // 将获取上传的图片文件， 再将文件显示到预览图上
    let imgFileEle = document.querySelector(".imgFile");
    imgFileEle.onchange = function () {
        let imgobj = this.files[0];
        let fileReader = new FileReader();
        fileReader.readAsDataURL(imgobj);
        fileReader.onload = function () {
            // 获取到通过 FIleReader 类 转为 base64格式数据
            // console.log(fileReader.result);
            let imgEle = document.createElement("img")
            imgEle.src = fileReader.result;
            imgEle.style.height = "99px";
            imgEle.style.width = "99px";
            imgdiv.innerHTML = "";
            imgdiv.appendChild(imgEle);
        }
    }
    let subbtn = document.querySelector(".btn");
    // 点击提交按钮发送 ajax
    subbtn.onclick = async function () {
        let username = document.querySelector(".username").value
        let pwd = document.querySelector(".pwd").value
        let imgfile = imgFileEle.files[0];
        let resetpwd = document.querySelector(".repeatpwd").value
        // console.log(username, pwd, imgfile);
        // let res = await axios.get("/user/getdata");
        // console.log(res);


        // 非空验证
        if (username == "") {
            return alert("用户名不能为空！")
        }
        if (pwd == "") {
            return alert("密码不能为空！")
        }
        if (pwd !== resetpwd) {
            return alert("两次密码不一致！")
        }
        if (typeof imgfile == "undefined") {
            return alert("请上传头像！")
        }
        // 模拟一个空的form 表单

        let form = new FormData();

        form.append("username", username);
        form.append("pwd", pwd);
        form.append("myimg", imgfile);
        // console.log(form);

        // 获取添加用户时 用户名和密码 并发送ajax到数据库中
        let { data } = await axios.post("/user/adduser", form);
        console.log(data);
        if (data.status == 1) {
            alert("添加成功！");
            adduermodelEle.style.display = "none";
            maskEle.style.display = "none";
            await getdata(res);
            await addEvent(res);
        }
    }
    // 绑定删除按钮事件
    let delbtn = document.querySelectorAll(".delBtn")

    delbtn.forEach(btn => {
        btn.onclick = async function () {
            console.log("点击了删除按钮");
            // 获取点击删除按钮对应的id
            let _id = this.getAttribute("myid");
            console.log(_id);
            // 二次确认是否删除
            let ifdel = confirm("确定删除吗？")

            if (ifdel) {
                // 用户确认删除   发送ajax
                let result = await axios.delete("/user/deluser", {
                    params: {
                        _id
                    }
                })
                console.log(result.data.status);
                // 如果删除成功就重新渲染页面和绑定事件
                if (result.data.status == 1) {
                    await getdata(res);
                    await addEvent(res);
                }

            }
        }
    })
    // 绑定页码点击事件
    let pagebtn = document.querySelectorAll(".pageContainer a")
    pagebtn.forEach(pagebtn => {
        pagebtn.onclick = async function (e) {
            e.preventDefault();
            let p = this.innerText;
            await getdata(res, p)
            await addEvent(res)
        }
    })

    let loginout = document.querySelector(".loginout");
    loginout.onclick = function () {

        rout.go("/login");  //跳转到登录页面

    }



}

let rout  //声明一个全局变量 把router存起来
export default function (router) {
    // 配置用户页二级路由
    let rout = router;
    router.route("/admin/users", async (req, res) => {
        // res.render(userView());
        // 获取数据库中的数据 并渲染出来

        await getdata(res);
        // 绑定事件    传入rout  退出登录按钮 跳转使用
        await addEvent(res, rout);

        // // 绑定退出登录按钮
        // let loginout = document.querySelector(".loginout");
        // loginout.onclick = function () {
        //     router.go("/login");
        // }

    })


}
